<template>
  <div>
    <div class="search_wrap">
      <el-form ref="ruleFormRef" :model="queryParams" label-width="60px" class="demo-ruleForm" status-icon
        :inline="true">
        <el-form-item label="区划" prop="areaIdList">
          <el-select style="width: 240px;" v-model="queryParams.areaIdList" multiple placeholder="请选择区划"
            @change="handleChange">
            <el-option v-for="item in areaList" :key="item.administrationId" :label="item.administrationName"
              :value="item.administrationId" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item v-if="orgListShow" label="机构" prop="creditCodeList">
          <el-select v-model="queryParams.creditCodeList" multiple placeholder="请选择机构">
            <el-option v-for="item in orgList" :key="item.creditCode" :label="item.organizationName"
            :value="item.creditCode"/>
          </el-select>
        </el-form-item> -->
        <el-form-item label="姓名" prop="practitionersName">
          <el-input v-model="queryParams.practitionersName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
          搜索
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        
        </el-form-item>
      </el-form>
    </div>
    <aplid-base-crud ref="crud" v-bind="baseConfig" @selection-change="handleSelectChange" >
    </aplid-base-crud>
    <div class="btn_wrap">
      <el-button type="primary" @click="handleSave">保存</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { baseConfig } from './config.js'
import { storeToRefs } from 'pinia'
import { useConfigStore } from '@/stores/common'
import api from '@/apiMod'
import type { FormInstance } from 'element-plus'

let orgListShow = ref(false)
interface RuleForm {
  areaIdList: Array<string>
  creditCodeList: Array<string>
  practitionersName:string|undefined
}
const emit = defineEmits<{
  (e: 'close', data: Array<any>)
}>()
const ruleFormRef = ref<FormInstance>()
let { selection } = storeToRefs(useConfigStore())
selection.value = true
const selectList = ref([])
const areaList = ref([])
const orgList = ref([])
const crud = ref(null)
const queryParams = reactive<RuleForm>({
  areaIdList: [],
  creditCodeList: [],
  practitionersName:undefined
})
onMounted(() => {
  getAreaList()
})
const handleSelectChange = (data) => {
  selectList.value = data
}
const handleSave = () => {
  emit('close', selectList.value)
}
const getAreaList = async () => {
  const params = {
    administrationPid: 199554
  }
  const res = await api.areaList(params)
  areaList.value = res.data.records
}
const handleChange = async (data) => {
  if(Array.isArray(data) && data.length>0){
    orgListShow.value = true
  }else{
    orgListShow.value = false
  }
  const params = {
    areaIdList: data
  }
  const res = await api.view_dpServiceOrgBase_list(params)
  orgList.value = res.data
}
const handleSearch = () => {
  crud.value.refreshChange(queryParams)
}
const resetForm = (formEl: FormInstance | undefined) => {
  console.log(formEl);
  if (!formEl) return
  formEl.resetFields()
  handleSearch()
}
</script>

<style lang="scss" scoped>
.btn_wrap {
  display: flex;
  justify-content: flex-end;
}

.search_wrap {
  display: flex;
  margin-bottom: 10px;

  .search_item {
    display: flex;
    align-items: center;
    margin: 0 10px;

    .label {
      margin-right: 10px;
    }
  }
}
</style>